<template>
	<view class="boo">
		<view class="show" v-if="hidden">
			<view class="bar">
				<view v-for="item in list" :key="item.name">
					{{item.name}}
				</view>
			</view>

			<u-swipe-action v-for="(item,index) in goodslist" :key="item.id">
				<u-swipe-action-item :options="options1" @click="del(index)">
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="swipe-action__content">
							<view class="boxx">
								<view class="check">
									<u-checkbox-group>
										<u-checkbox activeColor="red" @change="onecheck(index)" :checked="item.checked">
										</u-checkbox>
									</u-checkbox-group>
								</view>
								<view class="box">
									<view class="leftbox">
										<img :src="'http://localhost:3070'+item.img" alt="">
									</view>
									<view class="rightbox">
										<view class="title">
											{{item.goodsname}}
										</view>
										<view class="price">
											￥{{item.price}}
										</view>
										<view class="lowprice">
											￥{{item.price*1.5}}
										</view>
										<view class="text">
											<u-number-box class="ad" :step="1" v-model="item.num"
												@minus="dee(1,item.id)" @plus="add(1,item.id)">
											</u-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>


			<!-- <view class="boxx" v-for="(item,index) in goodslist" :key="item.id">
				<view class="check">
					<u-checkbox-group>
						<u-checkbox activeColor="red" @change="onecheck(index)" :checked="item.checked"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="box">
					<view class="leftbox">
						<img :src="'http://localhost:3070'+item.img" alt="">
					</view>
					<view class="rightbox">
						<view class="title">
							{{item.goodsname}}
						</view>
						<view class="price">
							￥{{item.price}}
						</view>
						<view class="lowprice">
							￥{{item.price*1.5}}
						</view>
						<view class="text">
							<u-number-box class="ad" v-model="item.num" @change="valChange"></u-number-box>
						</view>
					</view>
				</view>
			</view> -->
			<view class="foot">
				<view class="check">
					<u-checkbox-group>
						<u-checkbox activeColor="red" label="全选" :checked="checkall" @change='allchecked'></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="content">
					合计:￥{{allprice}}
				</view>
				<view class="but">
					<button @click="toorder">去结算</button>
				</view>

			</view>
		</view>

		<view class="hidden" v-else>
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
			<button class="bbt" @click="tocate">添加商品</button>
		</view>


	</view>
</template>

<script>
	import {
		getuser,
	} from '../../common/getuser.js'
	import baseUrl from '@/rquest/baseUrl.js'
	import {
		cartlist,
		cartedit
	} from '../../rquest/api.js'
	export default {
		data() {
			return {
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#FF6040'
					}
				}],
				value: '',
				list: [{
						name: '全部(20)'
					},
					{
						name: '降价(4)'
					},
					{
						name: '全部(2)'
					},
					{
						name: "分类"
					}
				],
				goodslist: [],
				baseUrl: baseUrl,
				// allchecked:false,
				checkall: false,
				hidden: ''
			}
		},
		onLoad(options) {
			if (this.goodslist.length == 0) {
				this.hidden = false
			} else {
				this.hidden = true
			}
			// console.log(1111111111111111111);
			// console.log(options);
			// cartlist({
			// 	uid:uni.getStorageSync("user").uid
			// }).then(res => {
			// 	this.goodslist = res.data.list
			// 	this.goodslist.map(item=>{
			// 	this.$set(item, "checked", false);
			// 	})
			// 	// console.log(this.goodslist);
			// })
		},

		onShow() {

			if (this.goodslist.length == 0) {
				this.hidden = false
			} else {
				this.hidden = true
			}

			if (uni.getStorageSync('user')) {
				console.log(888888888888888888888888);
				cartlist({
					uid: uni.getStorageSync("user").uid
				}).then(res => {
					this.goodslist = res.data.list ? res.data.list : []
					this.goodslist.map(item => {
						this.$set(item, "checked", false);
					})
					if (this.goodslist.length == 0) {
						this.hidden = false
					} else {
						this.hidden = true
					}
				})
			} else {
				console.log(2222222222222);
				this.hidden = false
				return

			}
		},
		computed: {
			// 计算
			allprice() {
				let sum = 0;
				this.goodslist.map(item => {
					if (item.checked) {
						sum += item.num * item.price
					}
				})
				return sum
			},
			allnum(){
				let smm = 0;
				this.goodslist.map(item => {
					if (item.checked) {
						smm += item.num 
					}
				})
				return smm
			}
		},
		methods: {
			del(e) {
				console.log(getuser());
				this.goodslist.splice(e, 1)
				if (this.goodslist.length == 0) {
					this.hidden = false
				} else {
					this.hidden = true
				}

			},
			// 单选
			onecheck(e) {
				this.goodslist[e].checked = !this.goodslist[e].checked
				this.checkall = this.goodslist.every((item) => item.checked);

			},

			toorder() {
				// console.log(this.goodslist.some(item=>{
				// 	return item.checked
				// }));
				// 判断是否选择了至少一件商品
				let abc = this.goodslist.some(item=>{
					return item.checked
				})
				if(!abc){
					uni.showToast({
						title:'至少选择一个商品'
					})
					return
				}
				
				let arr=[];
				// 判断被选中的商品
				this.goodslist.map(item=>{
					if(item.checked){
						arr.push(item)
					}
				})
				// 存储购物车的信息
				uni.setStorageSync('cart',arr)
				// 存储总价
				uni.setStorageSync('allprice',this.allprice)
				// 存储总数
				uni.setStorageSync('allnum',this.allnum)
				// 跳转到订单页
				uni.navigateTo({
					url: '../order/order'
				})
				
			},

			// 全选
			allchecked(e) {
				console.log(e);
				this.goodslist.map(item => {
					item.checked = e
				})
			},
			tocate() {
				uni.switchTab({
					url: '../cate/cate'
				})
			},
			dee(e, d) {
				console.log(e, d);
				cartedit({
					id: d,
					type: 1
				}).then(res => {
					console.log(res);
				})
			},
			add(e, d) {
				console.log(e, d);
				cartedit({
					id: d,
					type: 2
				}).then(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss">
	.bbt {
		margin-top: 66rpx;
		width: 40%;
		background-color: dodgerblue;
		color: #fff;
	}

	.del {
		width: 60rpx;
		height: 60rpx;
		font-size: 20rpx;
		position: absolute;
		left: 0px;
		top: 0rpx;
		background-color: #FF6040;
	}

	.boo {
		background-color: #eee;
		padding-bottom: 800rpx;
	}

	.boxx {
		display: flex;
		align-items: center;
		padding-left: 9rpx;
		background-color: #fff;
		margin-top: 20rpx;
		position: relative;
	}

	.bar {
		color: #fff;
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-around;
		/* 
		background-image:(to top, #8fa1ff, #3757fa); */
		/* background-color: #FF6040; */
		background: -webkit-gradient(linear, left top, left bottom, from(#FF6040), to(#fff), color-stop(0, #fff), color-stop(0, #FF6040));

	}


	.box {
		width: 90%;
		height: 280rpx;
		background-color: #fff;
		margin: 20rpx 0px;
	}

	.leftbox {
		width: 36%;
		height: 280rpx;
		box-sizing: border-box;
		float: left;
	}

	.leftbox image {
		width: 100%;
		height: 100%;
	}

	.rightbox {
		box-sizing: border-box;
		float: right;
		width: 64%;
		height: 280rpx;
		padding: 12rpx;
	}

	.title {
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.price {
		color: #FF6040;
		margin-top: 14rpx;
		font: bold;
	}

	.lowprice {
		color: #ccc;
		text-decoration: line-through;
		margin-top: 4rpx;
		font-size: 14px;
	}

	.text {
		font-size: 15px;
		margin-top: 10rpx;
		color: grey;
	}

	.ad {
		justify-content: end;
	}

	.u-number-box.data-v-6cbf39ee {
		justify-content: flex-end;
		margin-top: -13rpx;
	}

	.foot {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		align-items: center;
		display: flex;
		position: fixed;
		/*  #ifdef H5 */
		bottom: 50px;
		/* #endif */

		/*  #ifndef H5 */
		bottom: 0px;
		/* #endif */
		left: 0px;
		justify-content: space-between;
		padding: 0px 12rpx;
		box-sizing: border-box;
		z-index: 999;
	}

	.foot button {
		background-color: #FF6040;
		border: none;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
	}
</style>
